@mixin f-sectionNoGutter {
  .#{$f-section-prefix} {
    &+.#{$f-section-prefix} {
      &::before {
        display: none;
      }
    }
  }

  /*IDE 增加包裹component结构 */
  .f-struct-wrapper {
    &+.f-struct-wrapper {
      >.#{$f-section-prefix} {
        &::before {
          display: none;
        }
      }
    }
  }
}
@mixin sectionHasGutter {
  margin: $f-pt-split-section-outer-gutter 0 0;

  &::before {
      content: '';
      position: absolute;
      height: $f-section-gutter-height;
      background: $farris-pt-bg;
      left: 0;
      right: 0;
      top: -$f-section-gutter-height;
  }
}
/*******************************
            根目录
*******************************/
.f-page-root {
  @include f-utils-absolute-all;
  overflow: hidden;
}

/*******************************
            整个页面
*******************************/
.#{$f-page-prefix} {
  @include f-utils-absolute-all;
  @include f-utils-flex;
  background: $farris-pt-bg;

  /*******************************
            主要内容区
  *******************************/
  &-main {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    background: $farris-split-section-bg;
    box-shadow: $farris-split-section-shadow;
    border-radius: $farris-split-section-border-radius;
    margin: $f-pt-split-section-outer-gutter;

    // 扩展区域
    &-extend {}

    // 最后一个Section 去掉间隔
    >.#{$f-section-prefix}:last-child {
      margin-bottom: 0;

      &::after {
        display: none;
      }
    }
  }
}

/*******************************
          管理列表
*******************************/
.#{$f-page-prefix}-is-managelist,
.#{$f-page-prefix}-is-managelistwithsidebar {
  .#{$f-page-prefix}-main {
    @include f-utils-flex;
  }
}

.#{$f-page-prefix}-has-scheme {
  .#{$f-page-prefix}-main {
    margin-top: -$farris-split-section-outer-gutter-y;
    box-shadow: $farris-split-section-shadow-top-none;
  }

  .f-page-header {
    margin: $f-pt-scheme-header-outer-gutter;
    border-radius: $f-pt-split-section-outer-gutter $f-pt-split-section-outer-gutter 0 0;
    margin-bottom: 0;

    .f-page-header-base {
      padding: $f-pt-scheme-header-inner-gutter;
    }
  }
}

.#{$f-page-prefix}-has-query {
  .#{$f-page-prefix}-main {
    margin-top: -$farris-split-section-outer-gutter-y;
    box-shadow: $farris-split-section-shadow-top-none;
  }

  .f-page-header {
    margin: $f-pt-scheme-header-outer-gutter;
    border-radius: $f-pt-split-section-outer-gutter $f-pt-split-section-outer-gutter 0 0;
    margin-bottom: 0;

    .f-page-header-base {
      padding: $f-pt-scheme-header-inner-gutter;
    }
  }
}

/*******************************
         导航模板
*******************************/
.#{$f-page-prefix}-navigate {
  .#{$f-page-prefix}-main {
    @include f-utils-flex;
  }

  .#{$f-page-prefix}-content {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;

    // 默认取消栅格间距
    &>.col,
    &>[class*='col-'] {
      padding-left: 0;
      padding-right: 0;
    }

    &-nav {
      display: flex;
      flex-direction: column;
      box-shadow: $f-page-navigate-nav-box-shadow;
      padding: $f-pt-split-section-outer-gutter 0;
      position: relative;
      z-index: 100;

      &-extend {
        padding: $f-el-content-nav-extend-inner-gutter;
      }
    }

    &-main {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 0;
      overflow: auto;

      >.#{$f-section-prefix}:last-child {
        &::after {
          display: none;
        }
      }

    }

    &-nav.f-component-splitter-pane {
      padding: 0;
    }

  }
}

/*******************************
         列表导航
*******************************/
.#{$f-page-prefix}-is-listnav {
  >.#{$f-page-prefix}-main {
    margin: 0;
  }

  .#{$f-page-prefix}-content {
    background: $farris-pt-bg;

    // 主题内容区
    &-main {
      position: relative;
      margin: 0 0 0 -0.25rem;

      .f-section-scheme,
      .f-section-query {
        &.f-section {
          margin: $f-pt-content-main-filter-scheme-outer-gutter;
          padding: $f-pt-content-main-filter-scheme-inner-gutter;
        }
      }

      .#{$f-page-prefix}-header {
        margin: $f-pt-split-section-outer-gutter $f-pt-split-section-outer-gutter 0;
      }

      .#{$f-page-prefix}-header-base {
        padding-left: $f-pt-listview-header-boundary-distance - $f-pt-split-section-outer-gutter;
        padding-right: $f-pt-listview-header-boundary-distance - $f-pt-split-section-outer-gutter;
      }

      .#{$f-page-prefix}-footer {
        padding-left: $f-pt-listview-header-boundary-distance - $f-pt-split-section-outer-gutter;
        padding-right: $f-pt-listview-header-boundary-distance - $f-pt-split-section-outer-gutter;
        margin-bottom: $f-pt-split-section-outer-gutter;
      }
    }
  }
}

/*******************************
         双列表
*******************************/
.#{$f-page-prefix} {

  &-is-grid-grid,
  &-is-tree-grid {
    .#{$f-page-prefix}-content-main {
      display: flex;
      flex-direction: column;
    }
  }
}

/*******************************
         卡片模板
*******************************/
.#{$f-page-prefix}-card {

  // 主内容区出现滚动条
  .#{$f-page-prefix}-main {
    overflow: auto;
  }
}

/*******************************
         卡片模板
*******************************/
.#{$f-page-prefix}-is-wizard {
  .#{$f-page-prefix}-main {
    @include f-utils-flex;
  }
}

/*******************************
       特殊间距
*******************************/
.#{$f-page-prefix}-is-managelist {
  .#{$f-section-prefix}+.#{$f-section-prefix} {
    @include sectionHasGutter;
    margin: $f-pt-split-section-outer-gutter 0 0;
  }

  /*IDE 增加包裹component结构 */
  .f-struct-wrapper {
    &+.f-struct-wrapper {
      >.#{$f-section-prefix} {
        @include sectionHasGutter;
        margin: $f-pt-split-section-outer-gutter 0 0;
      }
    }
  }
}

/*******************************
        标题区域是一致的
*******************************/

.f-title {
  //flex-shrink: 0;
  @include f-text-overflow;
}

.f-content {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0;
}

.f-toolbar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;

  .f-btn-separator {
    display: inline-block;
    width: 1px;
    background-color: #c2cbd1;
    height: 1em;
    margin: 0 0.5rem;
  }
}

.f-response-toolbar {
  display: block;
}


// 按钮左右padding
.f-btn-ml {
  margin-left: $f-btn-outer-gutter-left !important;
}

.f-btn-link-ml {
  margin-left: 0.875rem !important;
}

.f-btn-link-mr {
  margin-left: 0.875rem !important;
}

.f-btn-mr {
  margin-right: $farris-btn-gutter-x !important;
}

.f-cmp-mt {
  margin-top: $farris-cmp-gutter-y !important;
}

.f-cmp-mb {
  margin-bottom: $farris-cmp-gutter-y !important;
}

.f-cmp-mx {
  margin-left: $farris-cmp-gutter-x !important;
  margin-right: $farris-cmp-gutter-x !important;
}

.f-cmp-mr {
  margin-right: $farris-cmp-gutter-x !important;
}

.f-cmp-ml {
  margin-left: $farris-cmp-gutter-x !important;
}

.f-cmp-mx-minus {
  margin-left: -$farris-cmp-gutter-x !important;
  margin-right: -$farris-cmp-gutter-x !important;
}

.f-cmp-px {
  padding-left: $farris-cmp-gutter-x !important;
  padding-right: $farris-cmp-gutter-x !important;
}

.f-cmp-py {
  padding-top: $farris-cmp-gutter-y !important;
  padding-bottom: $farris-cmp-gutter-y !important;
}

.f-cmp-p {
  padding: $farris-cmp-gutter-y $farris-cmp-gutter-x !important;
}

.f-cmp-pt {
  padding-top: $farris-cmp-gutter-y !important;
}

.f-cmp-pb {
  padding-bottom: $farris-cmp-gutter-y !important;
}

// 组件之间的间隔，可能是border或者间距
.f-cmp-gutter {
  border-bottom: $f-pt-special-gutter;
}

// 分割线——下
.f-split-border-b {
  border-bottom: 1px solid $f-neutral-08;
}

.flex-fill.k-grid {
  overflow: hidden;
}

/*元素通用间距*/
.f-common-px {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.f-common-py {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.f-common-pt {}

.f-common-py-form {
  padding-top: 0.875rem;
  padding-bottom: 0.5rem;
}

/*2021年1月4日
* 调整样式——主从表卡片
* 后续替换成变量
*/
.f-struct-like-card {
  background: #FFFFFF;
  box-shadow: 0 4px 10px 0 rgba(31, 35, 41, 0.10);
  border-radius: 4px;
  margin: 0 0 $f-pt-split-section-outer-gutter;
}

.f-page-is-mainsubcard {

  .f-page-main,
  &.f-page-is-sidescrollspy .f-page-main .f-scrollspy-content {
    padding: $f-pt-split-section-outer-gutter;
    margin: 0;
    background: none;

    &::-webkit-scrollbar-track {
      background-color: $f-tmpl-bg;
    }

    &>.f-struct-like-card:last-child {
      margin-bottom: 0;
    }
  }
}

/*丛丛表样式实现*/
.f-struct-subsub-wrapper {
  position: relative;

  &::before {
    content: "";
    height: 4px;
    background: #fff;
    display: block;
    margin: 0 0 4px;
    box-shadow: 2px 3px 3px 0 rgba(31, 35, 41, 0.08);
  }

  &::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    top: -4px;
    left: 50%;
    box-shadow: 2px 2px 3px 0 rgba(31, 35, 41, 0.08);
    transform: rotate(45deg);
    z-index: 100;
  }
}

.f-cmp-lib-portlet {
  height: 100%;
}

.f-viewchange-content-item lib-portlet {
  height: 100%;
}

.f-area-hide {
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  position: absolute;
  transform: scaleY(0);
  transform-origin: 100% top;
  backface-visibility: hidden;
  transition: opacity .12s linear .12s, visibility .12s linear .12s, transform .12s linear .12s;
}

.f-area-show {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

// 顶部带Header，左导航右卡片结构内的样式 ---开始
.f-page-is-listnav-with-header {
  .f-page-content-main {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
  }
}


.f-page-content-main-extend {
  padding: 20px 22px 0;
}

.f-page-content-main-header {
  text-align: center;

  .f-title {
    margin: 0 auto;
    font-size: 20px;
  }

  .f-description {
    margin: 0 auto;
    color: $f-text-04;
  }
}

.f-page-content-main-overflow {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0;
  overflow: auto;
  padding: 20px 22px;

  .f-struct-like-card {
    margin: 0 auto;
    width: 100%;
    max-width: 1092px;
    box-shadow: none;
  }
}

.f-subgrid-by-table-footer {
  // 来自于section的左右间距
  padding: 0 0.875rem;

  .btn {
    color: $f-semantic-info-01;
    background: $f-semantic-info-03;
    width: 100%;
    justify-content: center;
    height: 36px;

    &:disabled {
      color: $farris-btn-disabled-color;
      background: $farris-btn-disabled-bg;
    }
  }
}

.f-section-oa-table {
  .f-section-header {
    .f-title {
      &::before {
        display: none;
      }

      padding-left:0;
    }
  }
}

// 顶部带Header，左导航右卡片结构内的样式 ---结束